<template>
  <div class="container">
    <section>
      <van-nav-bar title="注册"
                   fixed
                   placeholder
                   safe-area-inset-top/>
    </section>
    <div   class="login">
      <van-form @submit="onSubmit">
        <van-field
            v-model="user.userName"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="user.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">注册</van-button>
        </div>
      </van-form>
    </div>

  </div>
</template>


<script setup>
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {register} from "@/network/auth/index.js";
const user = ref({
  userName: "",
  password: "",
})
let router = useRouter();

function onSubmit() {
  console.log(user);
  register(user.value).then(res => {
    console.log(res);

    router.push({
      path: "/",
    });
  })

}

onMounted(() => {
  user.value = ref({
    userName: "",
    password: "",
  })
});
</script>

<style scoped lang="scss">
.container {
  height: 895px;
  width: 100%;
  background: white;
  display: table;
}

.login {
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}
</style>
